<template>
  <div>
    <el-form :model="formData" ref="formData" :rules="formRules" label-position="top" class="form-data">
      <el-form-item label="加盟商名称" prop="franchName">
        <el-input v-model="formData.franchName" placeholder="请输入" style="width: 100%"/>
      </el-form-item>

      <el-form-item label="加盟商联系人" prop="contactPerson">
        <el-input v-model="formData.contactPerson" placeholder="请输入" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="加盟商手机号码" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="备用联系方式" prop="phoneBack">
        <el-input v-model="formData.phoneBack" placeholder="请输入" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="加盟商等级" prop="leval">
        <el-select v-model="formData.leval" placeholder="请选择" style="width: 100%">
          <el-option label="白金" :value="0"></el-option>
          <el-option label="钻石" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="城市" prop="addressId" >
        <el-cascader v-model="formData.addressId" ref="cascader" :props="props" @change="handleChange"
                     style="width: 100%" :key="formData.city"/>
      </el-form-item>

      <el-form-item label="账号" prop="userName" >
        <el-input v-model="formData.userName" placeholder="请输入" style="width: 100%" :disabled="!(!formData.id)"/>
      </el-form-item>

      <el-form-item label="密码" prop="password" >
        <el-input type="password" v-model="formData.password" placeholder="请输入" style="width: 100%" :disabled="!(!formData.id)"/>
      </el-form-item>

      <el-form-item class="form-button">
        <el-button class="but-view" @click="drawerClose">取 消</el-button>
        <el-button class="but-view" type="primary" @click="onSubmit">{{formData.id ? '修 改' : '提 交'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getProvinces } from '@/utils/common.js'

  export default {
    name: 'AllianceBusinessForm',
    props: {
      entity: Object,
      status: String
    },
    data() {
      return {
        userList: [],
        formData: {
          addressId: null, // 省市区id
          province: null, //省
          city: null, //地级市
          county: null, //区县
          franchName: null, //加盟商名称
          contactPerson: null, //加盟商联系人
          phone: null, //加盟商手机号码
          phoneBack: null, //备用联系方式
          leval : null, //加盟商等级
          userName: null, //账号
          password: null, //密码
        },
        formRules: {
          addressId: [
            { required: true, message: '请选择城市', trigger: 'change' }
          ],
          franchName: [
            { required: true, message: '请输入加盟商名称', trigger: 'change' }
          ],
          leval: [
            { required: true, message: '请输入加盟商等级', trigger: 'change' }
          ],
          contactPerson: [
            { required: true, message: '请输入加盟商联系人', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '加盟商手机号码', trigger: 'blur' }
          ],
          phoneBack: [
            { required: true, message: '请输入备用联系方式', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        props: getProvinces()
      }
    },
    beforeMount() {
      if (this.entity) this.getDetails()
    },
    methods: {
      handleChange(row) {
        const entity = this.$refs.cascader.getCheckedNodes()[0]
        const list = entity && entity.pathLabels && entity.pathLabels.length > 0 ? entity.pathLabels : [null, null, null]
        let arr = ['province', 'city']
        for (let i = 0; i < list.length; i++) this.formData[arr[i]] = list[i]
      },
      drawerClose() {
        this.$emit('close')
      },
      async onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return
          this.formData.addressId = this.formData.addressId.join(',')
          const url = this.formData.id ? '/sys/back/franchisee/update' : '/sys/back/franchisee/add'
          await this.$ajax.post(url, this.formData)
          this.$message.success('操作成功!')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/sys/back/franchisee/info?id=${this.entity.id || ''}`)
        res.data.addressId = res.data.addressId ? res.data.addressId.split(',') : []
        this.formData = res.data
      }
    }
  }
</script>

<style scoped lang="scss">
  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
